<template>
  <div class="container">
    <div class="filter-container">
      <div class="flex-row" style="width: 90%;">
        <div class="flex-1" style="line-height: 40px;">角色管理</div>
        <el-button type="primary" size="middle" @click="addUser()" v-if="controlBtn.add">添加角色</el-button>
      </div>
    </div>
    <el-table v-loading="loading"
    :data="roleList"
    border
    style="width: 90%">
    <el-table-column
      prop="title"
      label="角色名称"
      align="center"
    >
    </el-table-column>
    <el-table-column
      prop="rec_flag"
      align="center"
      width="180"
      label="状态">
      <template slot-scope="{row}"><span>{{row.rec_flag == 10?'启用':'禁用'}}</span></template>
    </el-table-column>
    <el-table-column
      prop="update_at"
      align="center"
      label="更新时间"
      width="180">
    </el-table-column>
    <el-table-column
      align="center"
      width="260"
      label="操作">
      <template slot-scope="{row}">
        <el-button type="success" size="small" @click="editUser(row,1)" v-if="controlBtn.auth">权限设置</el-button>
        <el-button type="primary" size="small" @click="editUser(row,2)" v-if="controlBtn.edit">编辑</el-button>
        <el-button type="danger" size="small" @click="deleteUser(row)" v-if="controlBtn.del">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加、编辑 -->
  <el-dialog @close="dialogClose" :title="dialogVisible.dia_title" :visible.sync='dialogVisible.show' :close-on-click-modal=false>
    <el-form :rules="rules" :model="dialogVisible" ref="dialogVisible" label-position="top" class="dialogVisible">
      <el-form-item label="角色名称" prop="title"><el-input v-model="dialogVisible.title" placeholder="" clearable></el-input></el-form-item>
      <el-form-item label="状态" prop="rec_flag">
        <el-select v-model="dialogVisible.rec_flag">
          <el-option v-for="(item ,index) in status" :key="index" :label="item.title" :value="item.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="dialogVisible.show=false">取消</el-button>
        <el-button type="primary" @click="dialogSubmit()">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!-- 权限管理 -->
  <el-dialog @close="dialogClose" title="权限管理" :visible.sync='menusVisible' :close-on-click-modal=false class="manage">
      <div class="menus">
        <div class="list" v-for="(item,index) in menus" :key="index">
          <div class="item" v-for="(e,i) in item.children" :key="i">
            <div class="title">{{ e.label }}</div>
            <div>
              <el-checkbox-group v-model="e.menu">
                <el-checkbox v-for='(ee,ii) in e.btns' :key="ii" :label="ee"></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <div style="margin-top:15px">
          <el-button type="primary" plain @click="menusVisible=false">取消</el-button>
          <el-button type="primary" @click="menuSubmit()">确定</el-button>
        </div>
    </div>
  </el-dialog>
  </div>
</template>
<script>
import { role_save, role_info ,role_list,role_delete } from '@/api/system'
import store from '@/store'
import upath from '../../router/path'

  export default {
    data() {
      return {
        checkList:[],
        status:[{title:'启用',code:10},{title:'禁用',code:20}],
        loading:false,
        total:0,
        roleList:[],
        dialogVisible:{
          show:false,
          dia_title:'添加角色',
          title:'',
          rec_flag:10,
          paths:{},
          id:0
        },
        rules:{
          title:[{required:true,message:'角色名称不能为空',trigger: 'blur'}],
          rec_flag:[{required:true,message:'启用状态不能为空',trigger: 'change'}],
        },
        menus:[],
        menusVisible:false,
        controlBtn:{
          add:false,
          del:false,
          edit:false,
          auth:false
        }
      }
    },
    methods:{
      menuSubmit(){
        let obj = {}
        let that = this
        this.menus.forEach(e=>{
          e.children.forEach(ee=>{
            this.$set(obj,ee.path,ee.menu)
          })
        })    
        this.dialogVisible.paths = obj
        role_save(this.dialogVisible).then(res=>{
          that.menusVisible = false
          that.getRoleList()
        })
      },
      dialogClose(){
        // this.$refs.dialogVisible.resetFields()
      },
      editUser(row,type){
        if(type == 1){
          let that = this
          this.menusVisible = true
          if(this.menus && this.menus.length>0){
            let objectKeys = Object.keys(row.paths)
            this.menus.forEach(e=>{
              if(e.children){
                e.children.forEach(ee=>{
                  that.$set(ee,'menu',[])
                  objectKeys.forEach(eee=>{
                    if(ee.path == eee){
                      that.$set(ee,'menu',row.paths[eee])
                    }
                  })
                })
              }
            })            
          }
        }else{
          this.dialogVisible.show=true
        }
        this.getRowInfo(row)
      },
      getRowInfo(row){
        this.dialogVisible.dia_title='编辑角色'
        this.dialogVisible.title = row.title
        this.dialogVisible.id=row.id
        this.dialogVisible.rec_flag=row.rec_flag
        this.dialogVisible.paths = row.paths
      },
      deleteUser(row){
        let that = this
       this.$confirm('确实删除当前角色吗？','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消'
       }).then(()=>{
        role_delete({id:row.id}).then(res=>{
              that.getRoleList()
            })
       })
      },
      dialogSubmit(){
        let that = this
        this.$refs['dialogVisible'].validate((valid)=>{
          if(valid){
            that.dialogVisible.show=false
            role_save(this.dialogVisible).then(res=>{
              that.getRoleList()
            })
          }
        })
      },
      addUser(){
        this.dialogVisible.dia_title='添加角色'
        this.dialogVisible.title=''
        this.dialogVisible.id=0
        this.dialogVisible.rec_flag=10
        this.dialogVisible.paths = {}
        this.dialogVisible.show=true
      },
      getRoleList(){
        this.loading = true
        role_list().then(res=>{
          this.roleList = res
          this.loading = false
        })
      }
    },
    mounted(){
      this.getRoleList()
      // const menus = store.getters.menus
      this.menus = JSON.parse(JSON.stringify(upath.menus));
      const mainRoutes = store.getters.mainRoutes
      if(mainRoutes.role && mainRoutes.role.length>0){
        mainRoutes.role.forEach(e=>{
          if(e == '增加'){
            this.controlBtn.add = true
          }
          if(e == '删除'){
            this.controlBtn.del = true
          }
          if(e == '修改'){
            this.controlBtn.edit = true
          }
          if(e == '权限'){
            this.controlBtn.auth = true
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .dialogVisible {
    ::v-deep.el-form-item__label{
      padding: 0 !important;
    }
  }
  .manage {
    ::v-deep .el-dialog__body { padding-top: 0; }

  }
  .filter-container { padding-bottom: 10px; }
  .menus {
    margin-bottom: 20px;
    .list { padding-bottom: 5px;
      .item {
        padding-top: 10px;
        .title { font-size: 16px; padding-bottom: 5px; font-weight: bold; }
      }
    }
  }
</style>